<template>
  <div class="number-manage">
    <ul class="demo-tabs">
      <li
        v-for="(item, index) of tabList"
        :key="index"
        :class="activeIndex === index ? 'active' : ''"
        @click="handleClick(item, index)"
      >
        {{ item.name }}
      </li>
    </ul>
    <keep-alive>
      <component :is="activeName" class="content"></component>
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
import serveNum from './components/serve-num.vue'
import explicitNo from './components/explicit-num.vue'
import callTransfer from './components/call-transfer.vue'
import SIPNum from './components/SIP-num.vue'
export default defineComponent({
  name: 'numberManage',
  components: {
    serveNum,
    explicitNo,
    callTransfer,
    SIPNum
  },
  // ----------------生命周期-----------------------
  setup() {
    const state = reactive({
      tabList: [
        {
          name: '服务号',
          componentName: 'serveNum'
        },
        {
          name: '外显号',
          componentName: 'explicitNo'
        },
        {
          name: '呼转号',
          componentName: 'callTransfer'
        },
        {
          name: 'SIP号',
          componentName: 'SIPNum'
        }
      ],
      activeIndex: 0,
      activeName: 'serveNum'
    })

    const handleClick = (item: any, index: any) => {
      state.activeIndex = index
      state.activeName = item.componentName
    }
    return {
      ...toRefs(state),
      handleClick
    }
  }
})
</script>

<style lang="stylus" scoped>
.number-manage
  .demo-tabs
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    height: 32px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    list-style none
    margin: 16px 24px 0;
    padding 0
    li
      box-sizing: border-box;
      width: 75px;
      height: 32px;
      background var(--mc-gray3-color)
      border-radius: 4px;
      flex: none;
      order: 0;
      flex-grow: 0;
      font-size: 14px;
      line-height: 32px;
      text-align center
      color: rgba(0, 0, 0, 0.6);
      cursor pointer
    .active
      background: linear-gradient(0deg, rgba(30, 99, 245, 0.1), rgba(30, 99, 245, 0.1)), #FFFFFF;
      border: 1px solid var(--mc-main-color);
      color: var(--mc-main-color);
      line-height: 30px;
  .demo-tabs > .el-tabs__content
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  :deep(.el-tabs)
    .el-tabs__header
      border none
    .el-tabs__nav
      border: 1px solid var(--el-border-color-light)
    .el-tabs__item.is-active
      background var(--mc-main-color)
      color #fff
    .el-tabs__item
      width 130px
      height 40px
      line-height 40px
      text-align center
</style>
